package myJs.components.lefse

import japgolly.scalajs.react.ReactMonocle._
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.components.{InputComponent, PureInputComponent, SelectComponent}
import myJs.components.inline.{InputInlineComponent, SelectInlineComponent}
import myJs.myPkg.jquery._
import myJs.tool.Tool._
import myJs.Implicits._
import shared.Pojo.AllPlotData

import scala.collection.immutable.SeqMap

/** Created by yz on 3/11/2020
  */
object LdaLayoutComponent {

  @Lenses
  case class State(
      formJq: JQuery,
      resorientation: String,
      resnscl: String,
      resmfl: String,
      width: String,
      height: String
  )

  object State {

    def init = {
      val initData = AllPlotData()
      State(
        formJq = $("#form"),
        resorientation = initData.layout.resorientation,
        resnscl = initData.layout.resnscl,
        resmfl = initData.layout.resmfl,
        width = initData.layout.width,
        height = initData.layout.height
      )
    }

  }

  class Backend(bs: BackendScope[Unit, State]) {

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }

      }

      val resorientationMap = SeqMap("h" -> messages("h"), "v" -> messages("v"))
      div(
        SelectInlineComponent
          .Props(
            State.resorientation.zoomL,
            label = messages("barChartDirection"),
            name = "resorientation",
            optionMap = resorientationMap
          )
          .render,
        InputInlineComponent
          .Props(
            State.resnscl.zoomL,
            label = messages("resnsclLabel"),
            name = "resnscl",
            questionInfo = messages("resnsclInfo"),
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(State.resmfl.zoomL, label = messages("resmfl"), name = "resmfl", formJq = s.formJq)
          .render,
        div(
          `class` := "form-group",
          label(`class` := "control-label col-sm-4", s"${messages("picSizeWidthHeight")}", ":"),
          div(
            `class` := "col-sm-8",
            div(
              `class` := "input-group",
              PureInputComponent.Props(State.width.zoomL, name = "width", formJq = s.formJq).render,
              span(`class` := "input-group-addon", "-"),
              PureInputComponent.Props(State.height.zoomL, name = "height", formJq = s.formJq).render
            )
          )
        )
      )

    }

  }

  def component(state: State) = {
    ScalaComponent.builder[Unit].initialState(state).renderBackend[Backend].build
  }

  val Component = component(State.init)

}
